<input id="icon_name" class="hidden" value="{{params.username}}">
<input id="state" class="hidden" value="{{params.state}}">
<li class="light-blue user-profile" style="float:right;">
	<a data-toggle="dropdown" href="#" class="user-menu dropdown-toggle">
		<!--<img class="nav-user-photo" src="{{path.assets}}/avatars/user.jpg" alt="Jason's Photo">-->
		<span id="user_info">
			<small>欢迎回来,</small> {{params.name}}
		</span>
		<i class="icon-caret-down"></i>
	</a>
	<ul class="pull-right dropdown-menu dropdown-yellow dropdown-caret dropdown-closer" id="user_menu">
		<li id="updateSecret"><a href="#"><i class="icon-cog"></i> 修改密码</a></li>
		<li><a href="#"><i class="icon-user"></i> 个人资料</a></li>
		<li class="divider"></li>
		<li><a href="/logout"><i class="icon-off"></i> 注销</a></li>
	</ul>
</li>

<div id="userUpdate" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
			<h3 id="myModalLabel">修改密码</h3>
		</div>
		<div class="modal-body">
			<form class="form-horizontal">
				<div class="control-group">
					<label class="control-label" for="username">用户名</label>
					<div class="controls">
						<input type="text" id="username" readOnly="true">
					</div>
						
				</div>
				<div class="control-group">
					<label class="control-label" for="password">原密码</label>
					<div class="controls">
						<input type="password" id="prePwd" placeholder="old password">
						<span id="errorPwd" style="display:none;">密码错误!</span>
					</div>
				</div>
				
				<div class="control-group">
					<label class="control-label" for="password">新密码</label>
					<div class="controls">
						<input type="password" id="newPwd" placeholder="new password">
						<span id="errorCheck" style="display:none;">两次密码不同!</span>
					</div>	
				</div>

				<div class="control-group">
					<label class="control-label" for="password">确认新密码</label>
					<div class="controls">
						<input type="password" id="checkPwd" placeholder="new password"></div>
				</div>
			</form>
		</div>
		<div class="modal-footer">
			<button id="userUpdateSave"class="btn btn-primary">确定</button>
			<button id="release" class="btn" data-dismiss="modal" aria-hidden="true">取消</button>
		</div>
	</div>
</div>

<script src='{{{path.assets}}}/js/jquery-1.9.1.min.js'></script>
<script>
	$("#updateSecret").click(function() {
		var name  = $("#icon_name").val();

		updateSecret(name);
	});

	var updateSecret = function(name) {
		$("#userUpdate").modal('show');
		$("#username").val(name);
		var id, password;

		$.get('/api/user/'+name, function(data, status) {
			console.info('data',data);
			var user = data[0];
			if(status == 'success') {
						id = user.id;
						password = user.password;

						saveInfo(name, password, id);
			}
		});

	};

	var saveInfo = function(name, password, id) {

		$("#userUpdateSave").click(function() {

			var originPwd = $("#prePwd").val();
			var newPwd = $("#newPwd").val();
			var newPwdRepeat = $("#checkPwd").val();

			if(originPwd == password && newPwd == newPwdRepeat) {
				var putData = {
					id: id,
					userName: name,
					password: newPwd
				};
				console.info("putData",putData);
				//console.info(putData);
				$.ajax({
					url: '/api/user_info',
					type: 'PUT',
					data: putData,
					success: function(result) {
						$("#userUpdate").modal('hide');
						bootbox.alert("更新用户密码成功!",function(){
							window.location.href = '/logout';
						});
						
					},
					error: function(result) {
						$("#userUpdate").modal('hide');
						bootbox.alert("更新用户密码失败!");
					}
				});
			} else if(originPwd != password) {
				$("#prePwd").val('');
				$("#newPwd").val('');
				$("#checkPwd").val('');
				$('#errorPwd').attr('style', 'display:inline');
				$('#errorPwd').css('color', 'red');
			} else if(newPwd != newPwdRepeat){
				$("#prePwd").val('');
				$("#newPwd").val('');
				$("#checkPwd").val('');
				$('#errorCheck').attr('style', 'display:inline');
				$('#errorCheck').css('color', 'red');
			}
			
		});
	};
</script>